<template>
  <div class="result">
    <div class="result-text-all" v-if="$store.state.pk.loser === 'all'">
      Draw
    </div>
    <div
      class="result-text-loser"
      v-else-if="
        $store.state.pk.loser === 'A' &&
        $store.state.pk.a_id === $store.state.user.info.id
      "
    >
      Lose
    </div>
    <div
      class="result-text-loser"
      v-else-if="
        $store.state.pk.loser === 'B' &&
        $store.state.pk.b_id === $store.state.user.info.id
      "
    >
      Lose
    </div>
    <div class="result-text-win" v-else>Win</div>
    <div class="result-btn">
      <a-button @click="restart()" type="primary" size="large"
        >再来一局</a-button
      >
    </div>
  </div>
</template>
<script>
import { useStore } from "vuex";
export default {
  setup() {
    const store = useStore();
    const restart = () => {
      store.commit("updateLoser", "none");
      store.commit("updateStatus", "matching");
      store.commit("updateOpponent", {
        username: "我的对手",
        avatar: "",
      });
    };
    return {
      restart,
    };
  },
};
</script>

<style scoped>
div.result {
  height: 35vh;
  width: 30vw;
  background-color: rgba(50, 50, 50, 0.5);
  position: absolute;
  top: 35vh;
  left: 35vw;
}

div.result-text-win {
  text-align: center;
  color: green;
  font-weight: 600;
  font-style: italic;
  font-size: 3rem;
  padding-top: 5vh;
}
div.result-text-loser {
  text-align: center;
  color: red;
  font-weight: 600;
  font-style: italic;
  font-size: 3rem;
  padding-top: 5vh;
}
div.result-text-all {
  text-align: center;
  color: lightblue;
  font-weight: 600;
  font-style: italic;
  font-size: 3rem;
  padding-top: 5vh;
}
div.result-btn {
  text-align: center;
  padding-top: 4vh;
}
</style>